<template>
	<view class="content">
		<u-navbar title="求职期望"></u-navbar>
		<u-form :model="data.formData" :error-type="['toast']" ref="form1">
			<u-form-item required label="工作性质" prop="nature_text" label-position="top">
				<view class="u-flex u-flex-1 u-row-between">
					<u-input v-model="data.formData.nature_text" placeholder="请选择工作性质" disabled  @click="data.isNature=true" />
					<u-icon name="arrow-right" color="#bbbbbb" size="40" @click="data.isNature=true" ></u-icon>
				</view>
			</u-form-item>
			<u-form-item required label="期望职位" prop="category_text" label-position="top">
				<view class="u-flex u-flex-1 u-row-between">
					<u-input v-model="data.formData.category_text" placeholder="请选择期望职位" disabled 
						@click="data.isCategory=true"/>
					<u-icon name="arrow-right" color="#bbbbbb" size="40" 
						@click="data.isCategory=true"></u-icon>
				</view>
			</u-form-item>
			<u-form-item required label="期望地区" prop="district_text" label-position="top">
				<view class="u-flex u-flex-1 u-row-between">
					<u-input v-model="data.formData.district_text" placeholder="请选择期望地区" disabled 
						@click="data.isDistrict=true" />
					<u-icon name="arrow-right" color="#bbbbbb" size="40" 
						@click="data.isDistrict=true" ></u-icon>
				</view>
			</u-form-item>
			<u-form-item required label="期望薪资" prop="wage_text" label-position="top">
				<view class="u-flex u-flex-1 u-row-between">
					<u-input v-model="data.formData.wage_text" placeholder="请选择期望薪资" disabled  @click="data.isWage=true" 
					/>
					<u-icon name="arrow-right" color="#bbbbbb" size="40"  @click="data.isWage=true" ></u-icon>
				</view>
			</u-form-item>
			<u-form-item required label="期望行业" prop="trade_text" label-position="top">
				<view class="u-flex u-flex-1 u-row-between" >
					<u-input v-model="data.formData.trade_text" placeholder="请选择期望行业" disabled @click="data.istrade=true" 
						/>
					<u-icon name="arrow-right" color="#bbbbbb" size="40" @click="data.istrade=true" ></u-icon>
				</view>
			</u-form-item>
		</u-form>

		<!-- 工作性质 -->
		<u-select v-model="data.isNature" :list="data.natureList" value-name="id" label-name="name"
			@confirm="natureConfirm"></u-select>
		<!-- 期望职位 -->
		<u-select v-model="data.isCategory" mode="mutil-column-auto" :list="data.categoryList"
			@confirm="categoryConfirm"></u-select>
		<!-- 期望地区 -->
		<u-select v-model="data.isDistrict" :list="data.districtList" @confirm="districtConfirm"></u-select>
		<!-- 期望薪资 -->
		<u-picker-salary v-model="data.isWage" :minwage="data.formData.minwage" :maxwage="data.formData.maxwage"
			@cancel="data.isWage = false" @close="data.isWage = false" @confirm="wageConfirm"></u-picker-salary>
		<!-- 期望行业 -->
		<u-select v-model="data.istrade" :list="data.tradeList" value-name="id" label-name="name"
			@confirm="tradeConfirm"></u-select>


		<u-modal v-model="data.isRemove" title="系统提示" content="确定删除该求职期望吗？" show-cancel-button
			@confirm="removeConfirm"></u-modal>

		<u-bottom-button :showCancelButton="data.type == 'edit'" cancelText="删除" confirmText="保存"
			@cancel='data.isRemove = true' @confirm="$u.throttle(submit,2000)"></u-bottom-button>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue";
	import {
		onReady,
		onLoad
	} from '@dcloudio/uni-app'
	const form1 = ref();
	const data = reactive({
		// 是否修改页面
		type: '',
		formData: {
			nature: "",
			nature_text: "",
			category1: "",
			category2: "",
			category3: "",
			category_text: "",
			district1: "",
			district_text: "",
			minwage: 500,
			maxwage: 0,
			wage_text: "",
			trade: "",
			trade_text: ""
		},
		rules: {
			nature_text: [{
				required: true,
				message: '请选择工作性质',
				trigger: 'change',
			}],
			category_text: [{
				required: true,
				message: '请选择期望职位',
				trigger: 'change',
			}],
			district_text: [{
				required: true,
				message: '请选择期望地区',
				trigger: 'change',
			}],
			wage_text: [{
				required: true,
				message: '请选择期望薪资',
				trigger: 'change',
			}],
			trade_text: [{
				required: true,
				message: '请选择期望行业',
				trigger: 'change',
			}]
		},
		// 工作性质
		isNature: false,
		natureList: [],
		// 期望职位
		isCategory: false,
		categoryList: [],
		// 期望地区
		isDistrict: false,
		districtList: [],
		// 期望薪资
		isWage: false,
		wageList: [],
		// 期望行业
		istrade: false,
		tradeList: [],
		// 删除弹框
		isRemove: false

	});
	onReady(() => {
		form1.value.setRules(data.rules)
	})
	onLoad((option) => {
		data.type = option.type
		if(option.item != 'null'){
			data.formData = JSON.parse(option.item)
		}
		getClassifyData()
	})
	// 删除
	const removeConfirm = async () => {
		let params = {
			id: data.formData.id
		}
		let res = await uni.$u.api.getIntentionDel(params)
		if (res) {
			uni.$u.toast('删除成功')
			setTimeout(() => {
				uni.$u.route({
					type: 'back'
				})
			}, 1000)
		}
	}
	// 保存
	const submit = () => {
		form1.value.validate(async valid => {
			if (valid) {
				let res = await uni.$u.api.getIntentionSave(data.formData)
				if (res) {
					uni.$u.toast(data.type == 'edit' ? '修改成功' : '添加成功')
					setTimeout(() => {
						uni.$u.route({
							type: 'back'
						})
					}, 1000)
				}
			}
		});
	}
	// 工作性质确定事件
	const natureConfirm = (e) => {
		data.formData.nature = e[0].value
		data.formData.nature_text = e[0].label
	}
	// 职位确定事件
	const categoryConfirm = (e) => {
		data.formData.category1 = e[0].value
		data.formData.category2 = e[1].value
		data.formData.category3 = e[2].value
		data.formData.category_text = e[2].label
	}
	// 地区确定事件
	const districtConfirm = (e) => {
		data.formData.district1 = e[0].value
		data.formData.district_text = e[0].label
	}
	// 行业确定事件
	const tradeConfirm = (e) => {
		data.formData.trade = e[0].value
		data.formData.trade_text = e[0].label
	}
	// 薪资确定事件
	const wageConfirm = ({
		min,
		max
	}) => {
		data.formData.minwage = min
		data.formData.maxwage = max
		data.formData.wage_text = `${min / 1000}K~${max/1000}K`
		data.isWage = false
	}
	// 获取字典表数据
	const getClassifyData = async () => {
		let params = {
			type: 'resumeNature,jobcategory,citycategory,trade'
		}
		let res = await uni.$u.api.getClassifyInfo({
			params
		})
		data.natureList = res.resumeNature
		data.districtList = res.citycategory
		data.tradeList = res.trade
		data.categoryList = res.jobcategory
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0 30rpx;
		padding-bottom: 150rpx;
	}
</style>